<%@include file="include.jsp" %>
<html>
<head>
<title>Overview</title>
  <%@include file="header.jsp" %>
  <script>
  $(function() {
    $( "#startTime" ).datetimepicker({
    	showSecond: true,
    	timeFormat: 'HH:mm:ss',
    	stepHour: 1,
    	stepMinute: 5,
    	stepSecond: 10
    });
  });
  
  $(function() {
	    $( "#endTime" ).datetimepicker({
	    	showSecond: true,
	    	timeFormat: 'HH:mm:ss',
	    	stepHour: 1,
	    	stepMinute: 5,
	    	stepSecond: 10
	    });
  });
  
  function getStats(){
	  var type = $("#type").val();
	  $.ajax(
	  			{
	  				type: "POST",
	  				url:  "/dashboard/report/stat",
	  				data: "type=" + type,
	  				success: function(data){
	  					var json = jQuery.parseJSON(data);
	  					$("#box2").html(json.content);
	  					$("#sidebar").html('<img src="data:image/png;base64,' + json.image + '">');
	  				},
	  				error: function(e){
	  					alert("Error Ajax Request: " + e);
	  				}
	  			}
	 		);
  }
  
  function checkInterval(){
	  var start = $("#startTime").val();
	  var end = $("#endTime").val();
	  if(start>end){
		  $("#error").html("Interval start time cannot be greater than end time!");
	  }
  }
  </script>
 <!--  
  <script type="text/javascript">  
    // this function not used anymore
  	function doAjaxPost(){
  		// get form values
  		var type = $("#type").val();
  		var startTime = $("#startTime").val();
  		var endTime = $("#endTime").val();
  		var xUnit = $("#xUnit").val();
  		
  		$.ajax(
  			{
  				type: "POST",
  				url:  "/dashboard/report/statistic",
  				data: "type=" + type + "&date=" + date + "&xStart=" + xStart + "&xEnd=" + xEnd,
  				success: function(response){
  					alert(response);
  					$("#sidebar").html('<img src="data:image/png;base64,' + response + '">');
  				},
  				error: function(e){
  					alert("Error Ajax Request: " + e);
  				}
  			}
  		);
  	}
  </script>
-->

</head>
<body>
	<div id="bg">
		<div id="outer">
		<div id="header">
			<div id="logo">
				<h1>
				Database Tuning
				</h1>
			</div>
	    	<%@include file="navigation.jsp" %>
	    </div>
		<div id="main">
			<div id="content">
				<div id="box1">
					<form action="/dashboard/report/secondLevelDetail" method="post">
						<table>
							<tr><td>Report Type:</td><td colspan="3"><select id="type" name="type" onchange="getStats()">
							<option value="shared_pool" selected>Shared pool</option>
							<option value="buffer_cache">Buffer cache</option>
							<option value="redo_log">Redo log buffer/file</option>
							<option value="sorting">Memory area used for sorting</option>
							</select></td>
							</tr>
							<tr><td>Observation Interval:</td><td><input id="startTime" name="startTime" type="text" /></td>
							    <td> - </td>
							    <td><input id="endTime" name="endTime" type="text"></td>
							</tr>
							<tr><td>X Unit:</td><td><select id="xUnit" name="xUnit">
							<option>0</option><option>1</option><option>2</option><option>3</option><option>4</option>
							<option>5</option><option>6</option><option>7</option><option>8</option><option>9</option>
							<option>10</option><option>11</option><option>12</option><option>13</option><option>14</option>
							<option>15</option><option>16</option><option>17</option><option>18</option><option>19</option>
							<option>20</option><option>21</option><option>22</option><option>23</option><option>24</option>
							</select></td></tr>
							<tr><td colspan="4"><div id="error"></div></td></tr>
							<tr><td colspan="4" align="center"><input type="submit" value="Get Report"/></td></tr>
						</table>	
					</form>
				</div>
				<div id="box2">
				    
				</div>
				<br class="clear" />
			</div>
			
			<div id="sidebar">
			</div>
			<br class="clear" />
			<%@include file="footer.jsp" %>
		</div>
		</div>
	</div>
</body>
</html>